<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        div {
            background-color: brown;
        }
        #top{
            color: burlywood;
            background-color: cadetblue;
        }
        .content{
            background-color:greenyellow
        
        }
       ul li{
           color: hotpink;
       }
       .bottom>p{
           color: indigo;
       }
       .jiangsu~li{
           color: lawngreen;
       }
       h1,h2,h3,.text{
           color: lightcoral;
       }
       a.baidu{
           color: lightseagreen;
       }
       
    </style>
</head>
<body>
    <div>标签选择器</div>
    <div>text</div>
     <p id="top">id选择器</p>
     <span class="content">类选择器</span>
     <ul>
         <li>html</li>
         <li>css</li>
         <li>js</li>
     </ul>
     <ul>
         <li>苹果</li>
         <li>香蕉</li>
         <li>橘子</li>
     </ul>
     <div class="bottom">
         <p>第一个p标</p>
         <p>第二个p标</p>
           <div><p>第三个p标</p></div>
    </div>
     <ul class="adress">
         <li class="jiangsu">江苏省</li>
         <li>山西省</li>
         <li>上海市</li>
     </ul>
     <h1>我是1个h1</h1>
     <h2>我是1个h2</h2>
     <h3>我是1个h3</h3>
     <span class="text">我是一个h4</span>
     <a class="baidu" href="#">百度一下</a>
      <a class="taobao" href="#">淘宝</a>
</body>
</html>